<template>
    <div class="app">
        <block v-if="list==''">
            <div class="wrap">
                <div class="pic">
                    <img src="/static/images/shopingcar.jpg" alt="">
                </div>
                <div class="btn">
                    <text>购物车空空如也 快去逛逛吧</text>
                    <a href="/pages/shop/shop_list/main">去逛逛</a>
                </div>
            </div>
        </block>

        <block v-else>
            <div class='buylist'>
                <div class="goods" v-for="(item,index) in list" :key="index">
                    <div class='info'>
                        <div class='pic'>
                            <img  :src="resurl+item.pic+'?x-oss-process=image/resize,m_fill,w_750,h_300'" alt="">
                        </div>
                        <div class='name'>{{item.name}}</div>
                        <div class='price'>￥{{item.price}}</div>
                        <div class='numberop'>
                            <div class='changenumber'  @click="opnumber(item.id,op)">-</div>
                            <text>{{item.buynumber}}</text>
                            <div class='changenumber'  data-op='add'  @click='opnumbers(item.id,ops)'>+</div>
                        </div>
                        <img src="/static/images/deld.png" alt="" class="del" @click="del(item.id)">
                    </div>
                </div>
            </div>
        </block>

        <div class='bottom'>
            <div class='totalprice'>总额:{{totalprice}}</div>
            <a class='button' @click="buy">立即结算</a>
        </div>

    </div>
</template>

<script>
    import {change,pay,del,get,clear} from '../../../utils/shoping'
    var that = null
    export default {
        data() {
            return this.datainit({
                list:[],
                totalprice:0,
                id:null,
                op:'sub',
                ops:'add'
            })
        },
        onShow() {

        },
        mounted() {
            that = this
            that.check()
        },
        methods: {
            init() {
                let buylist = get();
                that.$post("shop/goods/full",{ list: JSON.stringify(buylist) },function(list){
                    that.list = list
                    that.settotalprice()
                })
            },
            settotalprice:function(){
                let  totalprice=0;
                let list=that.list;
                for (let i = 0; i < list.length;i++){
                    let item = list[i]
                    totalprice += parseInt(item['price'] * item['buynumber'] * 100)
                }
                that.totalprice = totalprice / 100

            },
            opnumber:function(_id,_op){
                that.id = _id
                that.op = _op
                let goods = that.getgoods(_id)
                if (_op == "sub") {
                    change(goods, -1)
                }
                that.init()
            },
            opnumbers:function(_id,_ops){
                that.id = _id
                that.ops = _ops
                let goods = that.getgoods(_id)
                if (_ops == "add") {
                    change(goods, 1)
                }
                that.init()
            },
            getgoods:function(id){
                let list = that.list
                let _index = -1
                console.log(list)
                for (var i in list) {

                    if (list[i].id == id) {
                        _index = i
                    }
                }
                return list[_index];
            },
            del: function (_id) {
                that.id = _id
                wx.showModal({
                    title: '操作提示',
                    content: '确定要将该商品移除购物车么',
                    success: function (res) {
                        if(res.confirm){
                            del(_id)
                            that.init()
                        }
                    }
                })
            },
            buy: function () {
                var buylist = get()
                buylist = JSON.stringify( buylist );
                that.$post("/shop/order/pre", { goods_list: buylist, type: "normal" }, function (pre_token) {
                    wx.navigateTo({
                        url: '/pages/shop/make/main?pre_token=' + pre_token,
                    })
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .wrap {
        width: 100%;
        height: 300px;
        .pic {
            width: 100%;
            height: 100%;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .btn {
            width: 100%;
            height: 100px;
            text-align: center;
            background: #fff;
            text {
                display: block;
                padding-top: 20px;
            }
            a {
                width: 200px;
                height: 30px;
                background: #ff6600;
                line-height: 30px;
                color: #fff;
                border-radius: 20px;
                margin: 20px auto;
            }
        }
    }

    .buylist {

        .goods {
            position: relative;
            display: block;
            width: calc(100% - 20px);
            padding: 0 10px;
            height: 110px;
            border-bottom: 1px solid #EEE;
            margin-bottom: 10px;
            background-color: white;
            .info {
                position: absolute;
                top: 10px;
                left: 20px;
                right: 0;
                height: 80px;
                font-size: 14px;
                .pic {
                    position: absolute;
                    left: 3px;
                    top: 0;
                    width: 80px;
                    height: 80px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .name {
                    position: absolute;
                    left: 90px;
                    width: 50%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    color: #333;

                }
                .price {
                    position: absolute;
                    right: 14px;
                    top: 0;
                    height: 20px;
                    line-height: 20px;
                    color: #ff6600;
                    font-size: 14px;

                }
                .numberop {
                    position: absolute;
                    left: 90px;
                    bottom: 0px;
                    width: 70px;
                    height: 23px;
                    border-radius: 2px;
                    border: 1px solid #ccc;
                    display: flex;
                    .changenumber {
                        position: relative;
                        width: 23px;
                        height: 23px;
                        flex: 1;
                        text-align: center;
                        line-height: 23px;
                        text {
                            display: block;
                            width: 23px;
                            height: 23px;
                            border-left: 1px solid #ccc;
                            border-right: 1px solid #ccc;
                            text-align: center;
                            font-size: 10px;
                            line-height: 23px;

                        }
                    }
                }
                .del {
                    position: absolute;
                    right: 13px;
                    bottom: 2px;
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }

    .bottom {
        position: fixed;
        width: 100%;
        height: 50px;
        bottom: 0;
        background-color: #FFF;
        .totalprice {
            position: absolute;
            left: 10px;
            height: 50px;
            width: 100px;
            line-height: 50px;
            color: #ff6600;
            font-size: 16px;
        }
        .button {
            position: absolute;
            right: 0;
            width: 120px;
            height: 50px;
            line-height: 50px;
            background-color: #ff6600;
            color: #FFF;
            text-align: center;
            font-size: 17px;
        }
    }
</style>

